
    // 遮罩层
    #over-fire {
      height: 100%;
    }
      .over {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(40, 44, 52,.2);
            z-index: 1000;
        }
//中间扩大扩小动画
@keyframes scaleUpDown {
      0%,
      100% {
        transform: scaleY(1) scaleX(1);
      }
      50%,
      90% {
        transform: scaleY(1.1);
      }
      75% {
        transform: scaleY(0.95);
      }
      80% {
        transform: scaleX(0.95);
      }
    }  

//左右deg摇动   
@keyframes shake {
      0%,
      100% {
        transform: skewX(0) scale(1);
      }
      50% {
        transform: skewX(5deg) scale(0.9);
      }
    }

//颗粒浮上
@keyframes particleUp {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        top: -100%;
        transform: scale(0.5);
      }
    }

    //内模糊光颜色
    @keyframes glow {
      0%,
      100% {
        background-color: #ef5a00;
      }
      50% {
        background-color: #ff7800;
      }
    }

    //火容器
    .fire-container {
      position: relative;
      width: 100px;
      height: 100px;
      margin-top: 10em;
      margin-left: auto;
      margin-right: auto;
    }
    //中容器
    .fire-main {
      position: absolute;
      height: 100%;
      width: 100%;
      animation: scaleUpDown 3s ease-out;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
       //中
    .main-fire {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
      transform: scaleX(0.8) rotate(45deg);
      border-radius: 0 40% 60% 40%;
      filter: drop-shadow(0 0 10px #d43322);
    }
    //颗粒
    .particle-fire {
      position: absolute;
      top: 60%;
      left: 45%;
      width: 10px;
      height: 10px;
      background-color: #ef5a00;
      border-radius: 50%;
      filter: drop-shadow(0 0 10px #d43322);
      animation: particleUp 2s ease-out 0;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }
  }

    //右容器
    .fire-right {
      height: 100%;
      width: 100%;
      position: absolute;
      animation: shake 2s ease-out 0;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
      //右
      .main-fire {
      position: absolute;
      top: 15%;
      right: -25%;
      width: 80%;
      height: 80%;
      background-color: #ef5a00;
      transform: scaleX(0.8) rotate(45deg);
      border-radius: 0 40% 60% 40%;
      filter: drop-shadow(0 0 10px #d43322);
    }
    //右颗粒
    .particle-fire {
      position: absolute;
      top: 45%;
      left: 50%;
      width: 15px;
      height: 15px;
      background-color: #ef5a00;
      transform: scaleX(0.8) rotate(45deg);
      border-radius: 50%;
      filter: drop-shadow(0 0 10px #d43322);
      animation: particleUp 2s ease-out 0;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }
  }

  //左容器
  .fire-left {
      position: absolute;
      height: 100%;
      width: 100%;
      animation: shake 3s ease-out 0;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
      //左
      .main-fire {
      position: absolute;
      top: 15%;
      left: -20%;
      width: 80%;
      height: 80%;
      background-color: #ef5a00;
      transform: scaleX(0.8) rotate(45deg);
      border-radius: 0 40% 60% 40%;
      filter: drop-shadow(0 0 10px #d43322);
    }
    //左颗粒
    .particle-fire {
      position: absolute;
      top: 10%;
      left: 20%;
      width: 10%;
      height: 10%;
      background-color: #ef5a00;
      border-radius: 50%;
      filter: drop-shadow(0 0 10px #d43322);
      animation: particleUp 3s infinite ease-out 0;
      animation-fill-mode: both;
    }
  }
  
  //内模糊光
  .fire-bottom .main-fire {
      position: absolute;
      top: 30%;
      left: 20%;
      width: 75%;
      height: 75%;
      background-color: #ff7800;
      transform: scaleX(0.8) rotate(45deg);
      border-radius: 0 40% 100% 40%;
      filter: blur(10px);
      animation: glow 2s ease-out 0;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }

  //加载中
  .jiazz {
    text-align:center;
    font: 50px/50px '微软雅黑';
    color:#ff841d;
  }
  //跳动
  @-webkit-keyframes dancing-dots-jump { 0% { top: 0; } 55% { top: 0; } 60% { top: -10px; } 80% { top: 3px; } 90% { top: -2px; } 95% { top: 1px; } 100% { top: 0; } }
div#jiazz > span {   -webkit-animation: dancing-dots-jump 1800ms infinite; padding: 1px; position: relative;}    
div#jiazz > span:nth-child(2) { -webkit-animation-delay: 100ms; }  
div#jiazz > span:nth-child(3) { -webkit-animation-delay: 300ms; }

//加载错误
#error {
  display: none;
}